<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slof</title>
    <script src="../../vue2.js"></script></head>
<body>
<div id="box">
    <child>
        <div slot="a">11111111111</div>   <!-- 没有使用插槽，将不会显示 -->
        <div slot="b">2222222222</div>
        <div>44444444444</div>
    </child>

    <navbar>
        <button slot="left">left</button>
        <i class="iconfont icon-all" slot="right">字体图标</i>
    </navbar>
</div>
<script>
    //插槽的意义：扩展组件能力，提高组件的复用性
    Vue.component("navbar",{
        template: `<div>
            <slot name="left"></slot>
            <span>navbar</span>
            <slot name="right"></slot>
        </div>`
    })


    // 单个插槽， <slot></slot>
    // 具有名字的插槽， <slot name="a"></slot>

    Vue.component("child",{
        template:`<div>
            child
            <slot name="a"></slot>   <!-- 插槽，允许child父组件里面的元素在此处插入并显示 -->
            <slot name="b"></slot>
<!--            <slot></slot>-->
        </div>`
    })
    new Vue({
        el:"#box",
    })
</script>
</body>
</html>